<template lang="html">
  <div>
    <selfHeader></selfHeader>
    <div class="car">
      <mt-field label="收货人姓名" placeholder="请输入收货人姓名" v-model="from.realName"></mt-field>
      <mt-field label="收货人电话" placeholder="请输入收货人电话" v-model="from.phone"></mt-field>
<!--      <mt-field label="所在省份" placeholder="请输入所在省份" v-model="from.province"></mt-field>-->
<!--      <mt-field label="所在城市" placeholder="请输入所在城市" v-model="from.city"></mt-field>-->
<!--      <mt-field label="所在区县" placeholder="请输入所在区县" v-model="from.district"></mt-field>-->
      <li>
        <div class="left">
          <span>所在地区</span>
        </div>
        <div class="right r">
          <div class="city" @click="toAddress">{{ city }}</div>
          <i class="arrow-r"> </i>
        </div>
      </li>
      <mt-field style="margin-top: 10px" label="详细地址" placeholder="请输入详细地址" v-model="from.detail"></mt-field>

      <v-distpicker type="mobile" @selected='selected' v-show="addInp" class="area1">
      </v-distpicker>
      <div class="mask" v-show="mask"></div>

      <mt-switch style="margin-top: 40px" v-model="from.isDefault">是否设为默认地址</mt-switch>
      <button class="btn" @click='appAdd'>新增地址</button>
    </div>
  </div>
</template>

<script>
import {appAdd} from '@/http/api'
import selfHeader from '@/common/header'
import Baseline from '@/common/_baseline.vue'
import {Toast, Field, Switch} from 'mint-ui'

import VDistpicker from 'v-distpicker'

export default {
  components: {
    'v-baseline': Baseline,
    Field,
    selfHeader,
    'mt-switch': Switch,
    VDistpicker
  },
  data() {
    return {
      from: {
        realName: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        isDefault: false
      },
      addInp: false,
      mask: false,
      city: '请选择'
    }
  },
  created() {
  },
  methods: {
    async appAdd() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid,
        address: this.from.province + this.from.city + this.from.district + this.from.detail,
        ...this.from
      }
      const res = await appAdd(data)
      if (res.code * 1 === 200) {
        Toast('地址新增成功');
      }
    },
    toAddress() {
      this.mask = true;
      this.addInp = true;
    },
    selected(data) {
      this.mask = false;
      this.addInp = false;
      this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
      this.from.province = data.province.value
      this.from.city = data.city.value
      this.from.district = data.area.value
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.car {
  margin-top: 60px;
}

li {
  list-style: none;
  height: 48px;
  background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-size: 120% 1px;
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  line-height: 1;
  min-height: inherit;
  overflow: hidden;
  padding: 0 10px;
  width: 100%;
  border: 0;
  .right {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    outline: 0;
    line-height: 1.6;
    font-size: inherit;
    width: 100%;
    margin-left: 20px;
  }
}

.area1 {
  width: 100%;
  height: 45%;
  min-height: 45%;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow-y: scroll;
  background-color: white;
  z-index: 100;
}

.distpicker-address-wrapper .address-header ul {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
}
</style>
